// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         {/* <img src={logo} className="App-logo" alt="logo" /> */}
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

// export default App;

import { useState,useEffect } from "react";

// 模拟一个接口请求函数
async function queryData() {
  const data=await new Promise((resolve)=>{
    setTimeout(() => {
      resolve(666)
    }, 2000);
  })
  return data
}

// useState()
// 1.传入初始值，返回一个数组
// 2.数组第一项：初始值
// 3.数组第二项：函数，用来更新状态的

// useEffect()
// 1.在函数组件中使用，用来监听状态的变化，当状态发生变化时，会执行函数
// 2.传入一个函数，函数会在状态发生变化时执行
// 3.传入一个数组，数组中是状态的变量名，当状态的变量名发生变化时，会执行函数;空数组或者数组里面放一个常量，就只会执行一遍

function App() {
  // let [num, setNum] = useState(1)
  let [num, setNum] = useState(1)  // [1,func]

  useEffect(()=>{
    queryData().then(data =>{
      setNum(data)
    })
  },[])

  function handle() {
    // num++ // num 改了但是无法触发视图更新
    setNum(num + 1) // 将 num 修改为 参数值，并触发视图更新
    console.log(num + 1);

  }

  return (
    // <div>{num}</div>
    <div>
      <button onClick={handle}>{num}</button>
    </div>
  )
}

export default App;